<template>

  <div id="container">
    <div id="nav">
      <div class="paddnone">
        <el-row :gutter="0">
          <el-col :xs="24" :sm="20" :md="20" :lg="20" :xl="20" class="paddingnone">
            <div class="grid-content ">
              <el-menu
                :default-active="activeIndex"
                text-color="#ffffff"
                :router="true"
                class="el-menu-demo"
                mode="horizontal"
                @select="handleSelect"
                background-color="#5cc1ff"
                active-text-color="#303133"
              >
                <img src="../static/images/logo/b.png" height="80" class="nav-img" />
                <el-menu-item index="/">首页 </el-menu-item>
                <el-menu-item index="/community">社区</el-menu-item>
                <el-menu-item index="3">学习资料</el-menu-item>
                <el-menu-item index="4">开发者</el-menu-item>
              </el-menu>
            </div></el-col>
          <el-col :xs="0" :sm="4" :md="4" :lg="4" :xl="4"
          ><div class="grid-content ">
            <div class="nav-img2">
              <img
                src= "../static/images/社区主页/u902.png"
                height="15"
                width="17"
              />
              <span>登录</span> | <span>注册</span>
            </div>
          </div></el-col
          >
        </el-row>
      </div>
    </div>

      <router-view />


    <div id="footer">
      <div class="footer-margin">
        <el-row :gutter="10">
          <el-col :xs="12" :sm="5" :md="5" :lg="5" :xl="5"><div class="grid-content bg-purple">
            <div class="footer-group">
              <h3>一级标题</h3>
              <ul>
                <li>二级标题</li>
                <li>二级标题</li>
                <li>二级标题</li>
                <li>二级标题</li>
              </ul>
            </div>
          </div></el-col>
          <el-col :xs="12" :sm="5" :md="5" :lg="5" :xl="5"><div class="grid-content bg-purple">
            <div class="footer-group">
              <h3>一级标题</h3>
              <ul>
                <li>二级标题</li>
                <li>二级标题</li>
                <li>二级标题</li>
                <li>二级标题</li>
              </ul>
            </div>
          </div></el-col>
          <el-col :xs="0" :sm="14" :md="14" :lg="14" :xl="14"><div class="grid-content bg-purple">
            <div class="code-group">
              <h3>一级标题</h3>
              <img src="../static/images/logo/b.png" height="80" class="nav-img" />
            </div>
          </div></el-col>
        </el-row>
      </div>

    </div>


  </div>


</template>
<script>
  export default {
    data() {
      return {
        activeIndex: "/2-2",
        activeIndex2: "1"
      };
    },
    methods: {
      handleSelect(key, keyPath) {
        console.log(key, keyPath);
      }
    },
    created(){
      this.$message({
          dangerouslyUseHTMLString: true,
          message: "<div><span>Welcome to YunCool!</span></div>",
          type: 'success'
        });
    },

  };
</script>

<style lang="scss">
  * {
    padding: 0;
    margin: 0;
  }
  html,body{
    margin: 0;
  }
  body {
    /* 滚动条样式 */
    &::-webkit-scrollbar {
      width: 7px;
    }
    &::-webkit-scrollbar-track {
      border-radius: 3px;
      background-color: #eee;
    }
    &::-webkit-scrollbar-thumb {
      border-radius: 3px;
      background: #909399;
    }
  }
  #app {
    font-family: "Avenir", Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /*text-align: center;*/
    color: #2c3e50;
    position: relative;
  }
.footer-margin{
  margin-right: 5px;
}
  #nav {
    position: relative;
    /*z-index: 99;*/
    width: 100%;
    background-color: #5cc1ff;
    a {
      font-weight: bold;
      color: #2c3e50;
      &.router-link-exact-active {
        color: #42b983;
      }
    }
    ul {
      border: none;
    }
    li {
      border-color: #303133;
      line-height: 80px;
      height: 100%;
      /*margin-top: 10px;*/
    }
  }
  .el-submenu.is-active .el-submenu__title{
    border: none;
  }


  .nav-img {
    float: left;
    cursor: pointer;
  }
  .nav-img2 {
    /*padding: 0 20px;*/
    float: right;
    line-height: 80px;
    span {
      cursor: pointer;
      font-size: 15px;
    }
  }
  li {
    list-style-type: none;
  }

  #footer {
    height: 200px;
    /*bottom: 0%;*/
    /*height: 100px;*/
    width: 100%;
    background-color: #5cc1ff;
    /*width: 100%;*/
  }
  .footer-group {
    float: left;
    padding: 20px 30px 40px;

  }
  .code-group {
    float: right;
    margin: 20px 60px 40px;
  }
  .paddnone{
    margin-right: 5px;
  }

</style>
